<template>
	<view style="padding: 30px 23px;">
		<view class="user_for" v-for="(list,id) in userList" :key="id">
			<view >
				<span  v-if='list.patrol_user_id!=null' >{{ list.patrol_time.substr(0, 4)
					}}年</span>
				<span v-else >{{list.begin_time.substr(0,4)}}年</span>
			</view>
			<view class="line_box">
				<!-- 圆球 -->
				<view class="line_radio" :style="{ 'background' : list.istrue ? '#578EF0' : '#8e8b8d' , 'border' : list.istrue ? 'solid 14rpx #578EF0' : 'solid 6rpx #b9b7b6'}"></view>
				<!-- 线 -->
				<view class="line_for" :style="{ 'background' : list.istrue ? '#578EF0 ' : '#8e8b8d'}"></view>
			</view>
			<view class="right_box" style="padding-bottom: 50px;" :style="{ 'color' : list.istrue ? '#333' : '#8e8b8d'}">
				<view style='margin-top: 4px'>
					<view>{{list.begin_times}}</view>
				</view>
				
				<view style="margin-top: 10px;">
					<span v-if='list.problem !=null'>有无问题：</span>
					<span v-if='list.problem == 0' style='color: #999999'>没有问题</span>
					<span v-if='list.problem == 1' style='color: red'>发现问题</span>
				</view>
				
				<view style="margin-top: 15px;" v-if='list.patrol_user_id==null' >
					<span style='color: #000000;'>该点位没有人员进行巡逻！</span>
				</view>
				
				
				<view v-if='list.patrol_user_id!=null'>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<view style='color: #999'>巡逻人：<span
							style='color: #333'>{{list.patrol_user_name}}</span></view>
					</view>
					<view style="margin-top: 10px;">
						 <span  style='color: #999'>巡逻内容：<span
						      style='color: #333'>{{list.patro_content}}</span></span>
					</view>
					<view style="margin-top: 10px;" v-if="list.patro_image !=null">
						<span style='color: #999'>图片：</span>
						<view style="width: 83px;height: 83px;display: -webkit-box;margin-top: 5px;">
							<image style="width: 100%;height: 100%;" v-for="(list,id) in list.patro_image.split(',')" 
							:src="list" @click="preview(list)" mode=""></image>
						</view>
					</view>	
				</view>
				<view class="title" style="width: 160px;">
					
				</view>
				
			</view>
		</view>
		<view v-if="userList.length != 0"
		style="background: #fff;height: 80px;position: fixed;bottom: 0;width: 87%;">
			<uni-pagination
				style="margin-top: 25px;"
				:total="recordTotal" 
				:current="pageIndex"  
				@change="handlePage">
			</uni-pagination>
		</view>

	</view>
</template>

<script>
	// import lFile from '@/components/l-file/l-file.vue'
	export default {
		components: {
			// lFile
		},
		data() {
			return {
				
				pageIndex:1,
				userList:[],
				recordTotal:null,
				total:10,
			}
		},
		
		onLoad(option) {
			this.lat = option.lat //option.lat 39.954174
			this.lng = option.lng //option.lng 116.378289
			console.log(this.lat)
			console.log(this.lng)
		},
		onShow() {
			this.getList()
		},
		methods: {
			//获取巡逻记录
			getList(){
				this.$request.api.getPartrol({
					lat:this.lat,
					lng:this.lng,
					pageIndex: this.pageIndex,
				}).then(res=>{
					this.userList = res.data.data.datalist
					this.recordTotal = res.data.data.total;
					console.log(this.recordTotal)
				})
			},
			// 分页点击事件
			handlePage(params) {
				// console.log(params)  可以打印看看params
				this.pageIndex = params.current;
				this.getList() // 点击的时候去请求查询列表
			},
			//点击放大图片
			preview(list) {
				uni.previewImage({
					urls: [list],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.feed-back {
		background: #F9F9F9;
		border-radius: 10rpx;
	}
	
	.feed-colcor1 {
		color: #666;
	}
	
	.feed-colcor2 {
		color: #333;
	}
	
	.feed-btn {
		width: 120rpx;
		height: 60rpx;
		float: right;
	
		.u-btn {
			width: 100%;
			height: 100%;
		}
	}
	
	.feed-fl {
		.u-btn {
			background: #FF9900;
			border-color: #FF9900;
			color: #fff;
		}
	}
	
	.act-img {
		border: 2rpx solid #eee;
		border-radius: 10rpx;
	
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.feed-mask{
		width: 100vw;
		height: 100vh;
	}
	.feed-details-box{
		width: 600rpx;
		height: 800rpx;
		background: #fff;
		overflow-y: scroll;
	}
	.billdetails_top {
		text-align: center;
		background-color: #fff;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	
	}
	.rep-deta-box {
		width: 100%;
		min-height: 28rpx;
		height: auto;
		overflow: hidden;
		line-height: 28rpx;
	}
	
	.rep-deta-box-l {
		float: left;
		color: #666;
		font-size: 28rpx;
	}
	
	.rep-deta-box-l2 {
		margin-left: 30rpx;
	}
		
	
	.rep-deta-box-r {
		float: right;
		color: #333;
		font-size: 28rpx;
	}

	.rep-deta-box-c {
		color: #999;
	}
	
	image {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 20rpx;
	}
	image:nth-child(3n) {
		margin-right: 0;
	}
	
	.user_for{
		display: flex;
	}
	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}
	.line_for {
		width: 4rpx;
		height: 100%;
		margin: 0 20rpx 10rpx;
		background-color:#559DFF;
	}
	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}
	.right_box {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}
	.desc{
		font-size: 30rpx;
		color: #8e8b8d;
		align-items: center;
		
	}	
	.index_tao_link {
		width: 550rpx;
		height: 220rpx;
		background: red;
		position: fixed;
		bottom: 72rpx;
		left: 102rpx;
		z-index: 12;
		background: url('https://clhy-img.oss-cn-beijing.aliyuncs.com/icon/bt/a42a490466ce9f18f0e063d5fa87730.png')no-repeat;
		background-size: 100%;
	}
		.index_tao_link_close {
			position: absolute;
			top: 48rpx;
			right: 45rpx;
			font-size: 30rpx;
	
		}
	 .close{
	    width: 31px;
	    height: 31px;
	    position: absolute;
	    right: 15px;
	    top: 20px;
	}
</style>
